<template>
  <div>
    <!-- 头 -->
    <i class="el-icon-s-unfold">&nbsp; 当前位置》运输需求》创建需求</i>

    <div class="search">
      <!-- 按钮与搜索 -->
      <div class="search-title">
        <div class="search-title-a">查询条件</div>
      </div>
      <!-- 搜索框 -->
      <div class="search-box">
        <span>
          订单号：<el-input
            v-model="search.orders"
            size="small"
            class="inp"
            placeholder="请输入内容"
          ></el-input>
        </span>
        &nbsp;&nbsp;
        <span>
          客户名称：<el-input
            v-model="search.usernames"
            size="small"
            class="inp"
            placeholder="请输入内容"
          ></el-input>
        </span>
        &nbsp;&nbsp;
        <!-- 按鈕 -->
        <span>
          <el-button @click="searchas" type="primary">搜索</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "need",
  data() {
    return {
      search: {
        orders: "",
        usernames: "",
      },
    };
  },
  components: {},
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /* 组件传值：传值给父组件 */
    searchas() {
      console.log("子组件方法");
      this.$emit("searchs", this.search);
    },

    /* 重置搜索框 */
    reset() {
      this.search = {};
    },
  },
  mounted() {},
};
</script>

<style>
.inp {
  width: 150px;
}

.search {
  width: 99%;
  height: 100px;
  border: 1px solid rgb(180, 176, 174);
  border-radius: 5px;
}
.search-title {
  border-bottom: 1px solid rgb(180, 176, 174);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  width: 100%;
  height: 40px;
  background-color: rgb(234, 232, 232);
  font-weight: 600;
}
.search-title-a {
  padding-left: 10px;
  padding-top: 5px;
}
.search-box {
  background-color: aliceblue;
  padding-left: 10px;
  padding-top: 8px;
}
.sheet {
  width: 99%;
  margin-top: 20px;
  border: 1px solid rgb(180, 176, 174);
  border-radius: 5px;
}
</style>
